<script setup lang="ts">
import {ArrowLeft, ArrowRight, Refresh, Headset, ElementPlus} from "@element-plus/icons-vue"
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import SearchArea from "@/components/Screen/SearchArea.vue"
import UserInfo from "@/components/Screen/UserInfo.vue"
import HeaderOptionBtn from "@/components/Screen/HeaderOptionBtn.vue"
import HeaderWindowsBtn from "@/components/Screen/HeaderWindowsBtn.vue"
import CutView from "@/components/Screen/CutView.vue"
import { computed } from 'vue'
defineOptions({
  name: "HeaderView"
})

const route = useRoute()

console.log(history)

const canBack = computed(()=>{
  const name = route.name
  return window.history.state.back !== null
})

const canForward = computed(()=>{
  const name = route.name
  return window.history.state.forward !== null
})

const handleReload = ()=>{
  location.reload()
}

</script>

<template>
  <div class="header-tools">
    <div class="header-left">
      <a @click="$router.back()" :class="{disabled: !canBack}"><el-icon ><ArrowLeft /></el-icon></a>

      <a @click="$router.forward()" :class="{disabled: !canForward}"><el-icon><ArrowRight /></el-icon></a>
      <a @click="handleReload"><el-icon><Refresh /></el-icon></a>
      <div class="search">
        <SearchArea></SearchArea>
      </div>

      <el-icon @click="ElNotification('这只是个装饰按钮')"><Headset /></el-icon>
    </div>
    <div class="header-right">
      <user-info></user-info>
      <HeaderOptionBtn></HeaderOptionBtn>
      <CutView></CutView>
      <HeaderWindowsBtn></HeaderWindowsBtn>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.header-tools {
  -webkit-app-region: drag;
  width: 100%;
  height: 75px;
  display: flex;
  padding-bottom: 22px;
  padding-top: 22px;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  display: flex;
  align-items: center;
}

.el-icon{
  margin-right: 20px;
  -webkit-app-region: no-drag;
}

.search{
  //width: 20%;
  width: 20vw;
  -webkit-app-region: no-drag;
}

.header-right{
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag;
}
.disabled{
  color: #7c7c7c;
}
</style>